<template>
  <section class="m-istyle">
    <dl @mouseover="over">
      <dt>{{list.title}}</dt>
      <template v-for="(item,key) in list.children">
        <dd :class="{active:isActive(key)}" :kind="key" :keyword="item.keyword">{{item.title}}</dd>
      </template>
      <!-- <dd :class="{active:kind==='all'}" kind="all" keyword="景点">全部</dd> -->
    </dl>
    <ul class="ibody">
      <li v-for="item in cur.children" :key="item.title">
        <el-card :body-style="{ padding: '0px' }" shadow="never">
          <img :src="item.img" class="image" />
          <ul class="cbody">
            <li class="title">{{ item.title }}</li>
            <li class="pos">
              <span>{{ item.pos }}</span>
            </li>
            <li class="price">
              ￥
              <em>{{ item.price }}</em>
              <span>/起</span>
            </li>
          </ul>
        </el-card>
      </li>
    </ul>
  </section>
</template>
<script>
export default {
  data: () => {
    return {
      kind: 'wuhan',
      list: {
        title: '推荐民宿',
        children: {
          wuhan: {
            title: '武汉',
            keyword: '武汉',
            children: [
              {
                img: 'http://p0.meituan.net/iphoenix/a820ab775ee680b0e4f1799d495fb5894293550.jpg@740w_416h_1e_1c',
                title: '【樱悦•漫悦璞树】光谷广场/华科大/文华学院/创业街/K11/斑马酒吧',
                pos: "整套1居室 | 可住2人 光谷/鲁巷",
                price: 119
              },
              {
                img: 'http://p0.meituan.net/iphoenix/a820ab775ee680b0e4f1799d495fb5894293550.jpg@740w_416h_1e_1c',
                title: '【樱悦•漫悦璞树】光谷广场/华科大/文华学院/创业街/K11/斑马酒吧',
                pos: "整套1居室 | 可住2人 光谷/鲁巷",
                price: 119
              },
              {
                img: 'http://p0.meituan.net/iphoenix/a820ab775ee680b0e4f1799d495fb5894293550.jpg@740w_416h_1e_1c',
                title: '【樱悦•漫悦璞树】光谷广场/华科大/文华学院/创业街/K11/斑马酒吧',
                pos: "整套1居室 | 可住2人 光谷/鲁巷",
                price: 119
              }
            ]
          },
          nanjing: {
            title: '南京',
            keyword: '南京',
            children: [
              {
                img: 'http://p0.meituan.net/iphoenix/7c92ec978eb1212debbddbe99da04f176185691.jpg@740w_416h_1e_1c',
                title: '『NO.24』 靠南京南站 毗邻夫子庙 地铁沿线 温馨舒适 干净整饬',
                pos: "整套1居室 | 可住2人 南京南站/明发",
                price: 119
              }
            ]
          },
          changsha: {
            title: '长沙',
            keyword: '长沙',
            children: [
              {
                img: 'https://img.meituan.net/phoenix/f4bcee62c92685bea3547d0cbc8d8c004689809.jpg@740w_416h_1e_1c',
                title: '【溪湖】C梅溪湖/Loft/日式风/近地铁/五一广场/橘子洲/IFS国金/岳麓山/文化艺术中心',
                pos: "整套1居室 | 可住2人 梅溪湖/洋湖风景区",
                price: 119
              }
            ]
          }
        }
      }
    }
  },
  computed: {
    cur: function () {
      return this.list.children[this.kind]
    }
  },
  methods: {
    over(e) {
      // console.log(e.target.getAttribute('kind'));
      let dom = e.target
      let tag = dom.tagName.toLowerCase()
      if (tag === 'dd') {
        this.kind = dom.getAttribute('kind')
      }
    },
    isActive(key) {
      return this.kind === key
    }
  }
}
</script>
<style lang="scss">
@import "@/assets/css/index/artistic.scss";
</style>
